<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="./lib/template-web.js"></script>
	<script src="./lib/jquery.js"></script>
</head>

<body>
	<div class="box"></div>
	<div class="box2"></div>

	<script type="text/html" id='tpl'>
		<h1>{{name}}==={{@ str}}==={{flag?'真':'假'}}===={{n+2}}==={{children.son}}==={{arr}}</h1>
	</script>
	<script type="text/html" id='tpl2'>
		<h1>{{name}}==={{age}}</h1>
	</script>

	<script>
		var obj = {
			name: 'rose',
			str: '<h2>我是h2</h2>',
			flag: false,
			n: 1,
			children: {
				son: '我是son'
			},
			arr: [1, 2, 3]
		}

		var obj2 = {
			name: 'jack'
		}


		var html = template('tpl', obj)
		$('.box').html(html)

		var html2 = template('tpl2', {
			...obj2,
			age: 18
		}) //  这里只能传对象 ，传了之后 对象中的属性可以直接在模板中使用
		$('.box2').html(html2)
	</script>

</body>

</html>
